<template>
	<div class="Saleskanban" :style="style">
		<div class="top">
			<span class="top-title">已添加功能看板</span>
			<span class="top-text">（提示：最多添加3个功能；拖动已添加功能，可进行排序）</span>
		</div>
		<div class="items">
			<template v-for="item in 20">
				<div :key="item" class="item">
					<div class="item-left">
						<i class="el-icon-folder"></i>
						<span>前场看板</span>
					</div>
					<div class="item-right-remove"><i class="icon iconfont iconicon_error"></i></div>
				</div>
			</template>
		</div>
		<div class="top">
			<span class="top-title">未添加功能</span>
			<span class="top-text">（提示：点击功能图标，进行添加）</span>
		</div>
		<div :key="time">
			<div v-for="(item,index0) in functionList" :key="index0">
				<div class="title">
					<div></div>
					<span>{{item.name}}</span>
				</div>
				<div class="items">
					<div v-for="(item1,index1) in item.arr" :key="index1" class="item">
						<div class="item-left">
							<i class="el-icon-folder"></i>
							<span>前场看板</span>
						</div>
						<div class="item-right-add"><i class="iconfont iconicon_add"></i></div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
import { getPerMission } from '@/utils/auth.js';
import {
	source_page
} from "@/api/board/datashow.js";
export default {
	data() {
		return {
			screenHeight: 0,
			functionList: [],
			time: ''
		};
	},
	computed: {
		style() {
			return 'height:' + (this.screenHeight - 115) + 'px;';
		}
	},
	mounted() {
		this.screenHeight = document.documentElement.clientHeight;
		window.onresize = () => {
			return (() => {
				this.screenHeight = document.documentElement.clientHeight;
			})();
		};
		this.getEcharts()
	},
	methods: {
		getEcharts() {
			let _this = this
			let functionList = getPerMission()?.functionLimitList.filter(res => (res.code.indexOf('board_Salesofkanban') !== -1))
			functionList.forEach(async res => {
				let data = {
					page: 1,
					pageSize: 9999,
					functionId: res.functionId
				}
				await source_page(data).then(a => {
					res.arr = a.data.data.filter(a => (a.publishStatus == 1))
				})
			})
			_this.functionList = functionList
			setTimeout(() => {
				_this.time = new Date().getTime()
			}, 200)
			console.log(_this.time)
		},
	}
};
</script>

<style lang="scss" scoped>
.Saleskanban {
  padding-left: 24px;
  overflow: auto;
}
.top {
  padding: 24px 0;
  .top-title {
    font-size: calc(#{$font_size} + 2px);
    font-weight: bold;
    color: #000000;
  }
  .top-text {
    font-size: $font_size;
    font-weight: bold;
    color: #969799;
    padding: 0 10px;
    font-weight: 500;
  }
}
.title {
  @include discen-al;
  padding: 12px 0;
  div {
    width: 8px;
    height: 8px;
    background: $bg_color;
    border-radius: 50%;
    margin-right: 6px;
  }
  span {
    font-size: $font_size;
    font-weight: 500;
    color: #333333;
  }
}
.items {
  display: flex;
  flex-wrap: wrap;
}
.item {
  margin: 0 24px 22px 0;
  width: 212px;
  height: 42px;
  border-radius: 4px;
  background: #ffffff;
  @include discen-al;
  justify-content: space-between;
  padding: 0 12px;
  .item-left {
    span {
      padding-left: 10px;
      font-weight: 400;
      font-size: $font_size;
    }
  }
  .item-right-remove {
    i {
      color: #ff5d5d;
      cursor: pointer;
    }
    i:hover {
      opacity: 0.7;
    }
  }
  .item-right-add {
    i {
      color: $bg_color;
      cursor: pointer;
    }
    i:hover {
      opacity: 0.7;
    }
  }
}
</style>
